<template>
	<view>

		<!--  -->
		<navBar :title="title"></navBar>

		<!--  -->
		<u-gap></u-gap>
		<!--  -->
		<view class="flex margin  align-items-center relative">
			<u-search input-align="center" shape="square" bgColor="#fff" placeholder="分组搜索" :showAction="false"
				:clearabled="false" v-model="keyword"></u-search>
			<view class="relative">
				<u-icon @click="changeShow" class="pl-5" name="grid" size="28"></u-icon>
				<view v-if="cateShow" class="tip absolute  bg-white p-5"
					style="width: 220rpx;right: 0; top:70rpx;z-index: 666;border-radius: 20rpx;">
					<view @click="create" class="item    flex mt-5 justify-center pb-4 align-items-center "
						style=" border-bottom: 2rpx solid #f4f4f4;">
						<u-icon name="plus-circle"></u-icon>
						<view class="text-sm pl-2" style="height: 40rpx;line-height: 40rpx;">
							新增设备分组
						</view>
					</view>
					<!-- 				<view class="item flex mt-5  pb-4  justify-center align-items-center "
						style="border-bottom: 2rpx solid #f4f4f4;">
						<u-icon name="edit-pen"></u-icon>
						<view class="text-sm pl-2 " style="height: 40rpx;line-height: 40rpx;">
							修改设备分组
						</view>
					</view>
					<view class="item flex mt-5  pb-4  justify-center align-items-center ">
						<u-icon name="trash"></u-icon>
						<view class="text-sm pl-2 " style="height: 40rpx;line-height: 40rpx;">
							删除设备分组
						</view>
					</view> -->
				</view>
			</view>

		</view>
		<!--  -->
		<u-gap></u-gap>
		<view class="bg-white">
			<u-cell-group>
				<u-cell title="未分组设备" url="/pages/cate/unCate/unCate" :isLink="true"></u-cell>
			</u-cell-group>
		</view>
		<u-gap></u-gap>
		<!--  -->

		<view class="">
			<h3 class="margin py-10">
				分组设备
			</h3>
			<u-cell-group customStyle="background:#fff">
				<u-cell v-for="val,i in list" :key="i">
					<view slot="title" class="u-slot-title" @click="selectOwnUserDeviceByGroupId(val)">
						<image class="pr-5" src="/static/img/cate/file.svg" style="width: 26rpx;height: 24rpx;" mode="">
						</image>
						<text class="u-cell-text">{{val.groupName}}</text>
					</view>
					<view class="flex" slot="value">
						<button @click="change(val)">修改</button>
						<button @click="deleteGroup(val)">删除</button>
					</view>
				</u-cell>
				<view class="text-center ">

				</view>
			</u-cell-group>

			<!-- 弹框 -->
			<u-modal title="分组信息" :show="show" :content="content" @close="close" :closeOnClickOverlay="true"
				showCancelButton>
				<u-input placeholder="分组名" v-model="groupData.groupName"></u-input>
				<u-button slot="confirmButton" text="确定" type="success" shape="circle" @click="edit(val)"></u-button>
			</u-modal>
		</view>

	</view>
</template>

<script>
	import {
		selectUserOwnGroupList,
		selectUserOwnUnGroupDeviceList,
		addGroup,
		editGroup,
		removeGroup,
		saveGroupDevice,
		selectOwnUserDeviceByGroupId
	} from '@/api/group/group.js'
	export default {
		data() {
			return {
				changeid: '',
				addOredit: false,
				content: "新增",
				show: false,
				groupData: {
					// "groupId": 0,
					"groupName": ""
				},
				title: "设备分组",
				keyword: '',
				cateShow: false,
				list: []
			};
		},
		methods: {
			create() {
				this.show = true
				this.addOredit = true
			},
			async selectOwnUserDeviceByGroupId(e) {
				let {
					groupId
				} = e
				let re = await selectOwnUserDeviceByGroupId(e)
				console.log(re, 'detail');
				let data = re.rows
				console.log(data, "data");
				this.$pub.go(`/pages/cate/cateDevice/cateDevice?data=${encodeURIComponent(JSON.stringify(data))}`)
			},
			close() {
				this.show = false
			},
			change(val) {
				this.show = true
				this.addOredit = false
				this.changeid = val.groupId
			},
			async deleteGroup(val) {
				if (val.groupId) {
					let re = await removeGroup(val.groupId)
					uni.showToast({
						title: '删除成功'
					})
					this.selectUserOwnGroupList()
				}
			},
			async edit() {
				if (this.addOredit) {
					let re = await addGroup(this.groupData)
					this.show = false
					this.selectUserOwnGroupList()
				} else {
					this.groupData.groupId = this.changeid
					let re = await editGroup(this.groupData)
					this.show = false
					this.selectUserOwnGroupList()
				}
			},

			changeShow() {
				console.log('切换');
				this.cateShow = !this.cateShow
			},
			async selectUserOwnGroupList() {
				let re = await selectUserOwnGroupList()
				this.list = re.data
				console.log(re, "re");
			},
		},
		onLoad() {

		},
		onShow() {
			this.selectUserOwnGroupList()
			this.cateShow = false
		}

	}
</script>
<style>
	page {
		background-color: #f3f3f3;
	}
</style>
<style lang="scss" scoped>
	.tip::after {
		content: "";
		position: absolute;
		left: 180rpx;
		top: -38rpx;
		width: 0rpx;
		height: 0rpx;
		border: 20rpx solid transparent;
		/*以下四个样式对应四种三角形，任选其一即可实现*/
		/* border-top-color:lightseagreen; */
		/* border-left-color:lightseagreen; */
		/* border-right-color:lightseagreen; */
		// border-bottom-color: #4c4c4c;
		border-bottom-color: #fff;
		// border-bottom-color: #282c35;
	}
</style>